<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- <h2>
      {{JSON.stringify($store.state.globalList)}}
    </h2> -->
    <!-- <h1>{{ str }}</h1> -->
    <!-- <h1 v-for="(item,index) in $store.getters.filterArr" :key="index">
    {{ item.title }}一共{{ item.price }}元</h1>
    <h2>{{ $store.getters.filterStr }}</h2>
    <button @click="fun">mutations按钮</button>
    <button @click="fun2">actions按钮</button> -->
    <input type="text" ref="text">
    <input type="password"  ref="pass" />
    <button @click="regis ">注册</button>
    <h2>{{ $store.state.regist.name }}</h2>
    <h2>{{ $store.state.regist.pass }}</h2>

  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
// import { mapState,  } from 'vuex'
// import { mapState, mapMutation } from 'vuex'

export default {
  name: 'Home',
  data(){
    return{
      regist:{},
      // str:this.$store.srare.str,
    }
  },
  components: {
    // HelloWorld
  },
  created(){
      // this.regis()
      console.log(this.$store.getters.filterArr)
      console.log(this.$store)
  },
  methods:{
    fun () {
      console.log(this.$store);
      console.log(this.$store.getters);
      let arr = [
        {title:'葡萄',price:100},
        {title:'榴莲',price:10},
        {title:'芒果',price:30},
      ]
      this.$store.commit('changeList', arr);
      // this.$store.commit({
      //   type:'changeList',
      //   data:arr
      // })
    },
    fun2(){
      console.log('store',this.$store)
      let arr = [
        {title:'hhh',price:100},
        {title:'xxx',price:10},
        {title:'ggg',price:30},
      ]
      this.$store.dispatch('action1',arr)
    },
    regis(){
      // console.log(this.$refs.text.value == ''? '111':'222')
      // console.log(this.$refs.pass.value)
      this.$store.commit({
        type:'regist',
        text:this.$refs.text.value,
        pass:this.$refs.pass.value
      })
      if(this.$refs.text.value ==  ''  || this.$refs.pass.value ==  ''){
        alert('请先输入密码')
      }else{
        console.log(this.$refs.text.value)
        this.regist.name = this.$refs.text.value 
        this.regist.pass = this.$refs.pass.value 
        console.log(this.regist.name)
        console.log(this.regist.pass)
        localStorage.setItem('regist',JSON.stringify(this.regist))
        console.log(JSON.parse(localStorage.getItem('regist')))
        this.$router.push({
        name:'About'
      })
      }
    }
  }
}
</script>
